<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<title>Scrollview</title>
		<style>
		h3{
		text-align:center;
		font-size: 18px
		}
		p{
		text-align:justify;
		margin-left:15px
		}
		.my_toolbar{
			background-image: none !important;

		}
		</style>
	</head>
	<body>
		<div id="my_box1" style='display:none;'>
		<h3>Imitation of Spenser</h3>
		<p>
		Now Morning from her orient chamber came,<br/>
		And her first footsteps touch'd a verdant hill;<br/>
		Crowning its lawny crest with amber flame,<br/>
		Silv'ring the untainted gushes of its rill;<br/>
		Which, pure from mossy beds, did down distill,<br/>
		And after parting beds of simple flowers,<br/>
		By many streams a little lake did fill,<br/>
		Which round its marge reflected woven bowers,<br/>
		And, in its middle space, a sky that never lowers.<br/>
		</p>
		<p>
		There the king-fisher saw his plumage bright<br/>
		Vieing with fish of brilliant dye below;<br/>
		Whose silken fins, and golden scales' light<br/>
		Cast upward, through the waves, a ruby glow:<br/>
		There saw the swan his neck of arched snow,<br/>
		And oar'd himself along with majesty;<br/>
		Sparkled his jetty eyes; his feet did show<br/>
		Beneath the waves like Africa's ebony,<br/>
		And on his back a fay reclined voluptuously.<br/>
		</p>
		<p>
		Ah! could I tell the wonders of an isle<br/>
		That in that fairest lake had placed been,<br/>
		I could e'en Dido of her grief beguile;<br/>
		Or rob from aged Lear his bitter teen:<br/>
		For sure so fair a place was never seen,<br/>
		Of all that ever charm'd romantic eye:<br/>
		It seem'd an emerald in the silver sheen<br/>
		Of the bright waters; or as when on high,<br/>
		Through clouds of fleecy white, laughs the coerulean sky.<br/>
		</p>
		<p>
		And all around it dipp'd luxuriously<br/>
		Slopings of verdure through the glossy tide,<br/>
		Which, as it were in gentle amity,<br/>
		Rippled delighted up the flowery side;<br/>
		As if to glean the ruddy tears, it tried,<br/>
		Which fell profusely from the rose-tree stem!<br/>
		Haply it was the workings of its pride,<br/>
		In strife to throw upon the shore a gem<br/>
		Outvieing all the buds in Flora's diadem.<br/>
		</p>

		</div>
		<div id="my_box2" style='display:none;'>
			<h3>The Human Seasons</h3>
			<p>
			Four Seasons fill the Measure of the year;<br/>
			Four Seasons are there in the mind of Man.<br/>
			He hath his lusty spring when fancy clear<br/>
			Takes in all beauty with an easy span:<br/>
			He hath his Summer, when luxuriously<br/>
			He chews the honied cud of fair spring thoughts,<br/>
			Till, in his Soul dissolv'd they come to be<br/>
			Part of himself. He hath his Autumn ports<br/>
			And Havens of repose, when his tired wings<br/>
			Are folded up, and he content to look<br/>
			On Mists in idleness: to let fair things<br/>
			Pass by unheeded as a threshhold brook.<br/>
			He hath his Winter too of pale Misfeature,<br/>
			Or else he would forget his mortal nature.<br/>
			</p>
		</div>
		<div id="my_box3" style='display:none;'>
			<h3>Fame</h3>
			<p>
			Fame, like a wayward girl, will still be coy<br/>
			To those who woo her with too slavish knees,<br/>
			But makes surrender to some thoughtless boy,<br/>
			And dotes the more upon a heart at ease;<br/>
			She is a Gipsey, - will not speak to those<br/>
			Who have not learnt to be content without her;<br/>
			A Jilt, whose ear was never whisper'd close,<br/>
			Who thinks they scandal her who talk about her;<br/>
			A very Gipsey is she, Nilus-born,<br/>
			Sister-in-law to jealous Potiphar;<br/>
			Ye love-sick Bards! repay her scorn for scorn;<br/>
			Ye Artists lovelorn! madmen that ye are!<br/>
			Make your best bow to her and bid adieu,<br/>
			Then, if she likes it, she will follow you. <br/>
			</p>
        </div>
        <div id="my_box4" style='display:none;'>
			<h3> Ode on Melancholy </h3>
			<p>
			NO, no, go not to Lethe, neither twist <br/>
			Wolfs-bane, tight-rooted, for its poisonous wine;<br/>
			Nor suffer thy pale forehead to be kiss'd<br/>
			By nightshade, ruby grape of Proserpine;<br/>
			Make not your rosary of yew-berries,<br/>
			Nor let the beetle, nor the death-moth be<br/>
			Your mournful Psyche, nor the downy owl<br/>
			A partner in your sorrow's mysteries;<br/>
			For shade to shade will come too drowsily,<br/>
			And drown the wakeful anguish of the soul. <br/>
			</p>
			<p>
			But when the melancholy fit shall fall<br/>
			Sudden from heaven like a weeping cloud,<br/>
			That fosters the droop-headed flowers all,<br/>
			And hides the green hill in an April shroud;<br/>
			Then glut thy sorrow on a morning rose,<br/>
			Or on the rainbow of the salt sand-wave,<br/>
			Or on the wealth of globed peonies;<br/>
			Or if thy mistress some rich anger shows,<br/>
			Emprison her soft hand, and let her rave,<br/>
			And feed deep, deep upon her peerless eyes. <br/>
			</p>
			<p>
			She dwells with Beauty - Beauty that must die;<br/>
			And Joy, whose hand is ever at his lips<br/>
			Bidding adieu; and aching Pleasure nigh,<br/>
			Turning to poison while the bee-mouth sips:<br/>
			Ay, in the very temple of Delight 25<br/>
			Veil'd Melancholy has her sovran shrine,<br/>
			Though seen of none save him whose strenuous tongue<br/>
			Can burst Joy's grape against his palate fine;<br/>
			His soul shall taste the sadness of her might,<br/>
			And be among her cloudy trophies hung.<br/>

			</p>

		</div>
		<div id="scroll" style="width:350px; height:450px; margin:20px"></div>
		<div id="toolbar" style="width:350px; height: 65px; margin-left:20px">





		</div>
		<script type="text/javascript" charset="utf-8">
			webix.ui({view:"layout",
					container:"scroll",
					type:"line", rows:[
					{ template:"<span style='font-size:16px; text-align:center; font-weight:bold'>John Keats\' Verses</span>", type:"header"},
					{
                        view:"scrollview", id:"verses", height:300,
                        scroll:"y",
                        body:{
                            rows:[
                                { id:"verse_1", template:"html->my_box1", autoheight:true},
                                { template:"<i>Scroll down for the next verse</i>", height:30},
                                { id:"verse_2", template:"html->my_box2", autoheight:true},
                                { template:"<i>Scroll down for the next verse</i>", height:30},
                                { id:"verse_3", template:"html->my_box3", autoheight:true},
                                { template:"<i>Scroll down for the next verse</i>", height:30},
                                { id:"verse_4", template:"html->my_box4", autoheight:true}
                            ]
                        } //end of scrollview body
					},
					{ view:"resizer" }, 
					{ view:"template", height:50, template:" Example of scrollview usage (drag down to hide me)"}
					] //end of rows
			});
			
		webix.ui({
            view:"scrollview", container:"toolbar", scroll:"x",  body:{
                view:"toolbar" ,css:"my_toolbar", id:"button_bar", cols:[
                    { view:"button", value: 'Imitation of Spenser', id: '1', width:150, click:"scroll"},
                    { view:"button", value: 'The Human Seasons', id: '2', width:150, click:"scroll"},
                    { view:"button", value: 'Fame', id: '3', width:150, click:"scroll"},
                    { view:"button", value: 'Ode on Melancholy', width:150, id: '4', click:"scroll"}
                ]
            }
        });

        function scroll(id){
            $$("verses").showView("verse_"+id);
        }
		</script>
	</body>
</html>
